<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		v-model
		1. input 的 value值   input text password/textarea
		2. input 的 选中状态   input checkbox radio/ select option
		</textarea>
		<div id="app">
			<input type="text" v-model="msg">
			<h1>{{msg}}</h1>
			
			多行文本输入域：
			<textarea rows="" cols="" v-model="tareabox"></textarea>
			{{tareabox}}
			
			复选框：
			<input type="checkbox" id="one" v-model="checked">
			<label for="one">one---{{checked}}</label>
			<br><br>
			
			兴趣爱好：
			<input type="checkbox" id="a" value="篮球1" v-model="checkboxarr">
			<label for="a">篮球</label>
			<input type="checkbox" id="b" value="足球1" v-model="checkboxarr">
			<label for="b">足球</label>
			<input type="checkbox" id="c" value="排球1" v-model="checkboxarr">
			<label for="c">排球</label>
			<input type="checkbox" id="d" value="游泳1" v-model="checkboxarr">
			<label for="d">游泳</label>
			{{checkboxarr}}
		</div>
		<script>
			new Vue({
				el:"#app",
				data:{
					msg:"111",
					tareabox:"",
					checked:false,
					checkboxarr:[]
				}
			})
		</script>
	</body>
</html>
